<template>
  <div class="update-gender">
      <!-- :default-index="value" 单列选择时，默认选中项的索引
      @change="onChange" 选项改变时触发
       @confirm="onConfirm" 点击完成时触发-->
    <van-picker
      title="性别"
      show-toolbar
      :columns="columns"
      :default-index="value"
      @cancel="$emit('close')"
      @change="onChange"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
export default {
    props:{
        value:{
            type:Number,
            required:true
        }
    },
  data () {
    return {
      columns: ['男', '女'],
      localGender:this.value,//选中的索引值
    }
  },
  methods: {
      onChange(picker, value, index) {
        //   改变时触发 三个参数 1选中值 2.内容 3.索引
      this.localGender=index
    },
    async onConfirm(){
        // 添加显示信息
        this.$toast.loading({
            message: "保存中",
            forbidClick:true,
            duration:0,
        })
        // try catch 监听事件
        try{
            const localGender = this.localGender
            await updateUserProfile({
                gender:localGender
            })  
            // 更新视图
            this.$emit('input',localGender)
            // 关闭弹层
            this.$emit('colse')
            // 提示操作成功
            this.$toast('修改性别成功')
        }catch(e){
            this.$toast('操作失败')
        }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
